<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      stripe
      highlight-current-row
    >
      <el-table-column label="二维码边长(cm)" align="center">
        <template slot-scope="scope">
          {{ scope.row.side }}
        </template>
      </el-table-column>
      <el-table-column label="建议扫描距离(米)" align="center">
        <template slot-scope="scope">
          {{ scope.row.distance }}
        </template>
      </el-table-column>
      <el-table-column label="下载链接" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.link" target="_blank"><img class="qrcode" :src="require('@/assets/images/download.png')"></a>
        </template>
      </el-table-column>
    </el-table>
    <div class="spaceline" />
    <el-row>二维码尺寸请按照43像素的整数倍缩放,以保持最佳效果</el-row>
  </div>
</template>

<script>
import { qrcodeList } from '@/api/jobfair'

export default {
  props: ['jobfairId'],
  data() {
    return {
      list: [],
      listLoading: true
    }
  },
  created() {
    this.getQrcodeList()
  },
  methods: {
    getQrcodeList() {
      this.listLoading = true
      const param = {
        jobfair_id: this.jobfairId
      }
      qrcodeList(param).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
<style scoped>
.el-tag{
  margin-right:10px;
  cursor:pointer;
  margin-bottom:10px;
}
</style>
